<script setup>
const props = defineProps({
    product:{
        type:Object,
        required:true
    }
})

// 定义事件
const emit = defineEmits(['testDemo'])
const triigerTestDemoEvent = ()=>{
    // 触发自定义事件
    emit('testDemo')
}
</script>

<template>
<button @click="triigerTestDemoEvent">btn</button>
<button @click="$emit('testDemo')">btn2</button>
<div>
    <!-- slot插槽 就是一个占位符，可以用来接收外部传入的内容 -->
    <slot>  </slot>
</div>
<div class="item">
    <img :src="product.productImg" alt="">
    <h3>{{ product.productName }}</h3>
    <div class="info">
        <div class="price">
            <span>￥</span>
            <span>{{ product.productPrice.split('.')[0] }}</span>
            <span>{{ product.productPrice.split('.')[1] }}</span>
        </div>
        <div class="extra-info" v-if="product.dazhe">
            {{ product.dazhe }}
        </div>
    </div>
    <div class="other-info">
        <div class="commoents">
            {{ product.productComment }}条评论
        </div>
        <div class="see-like">
            看相似
        </div>
    </div>
</div>
</template>

<style scoped>
</style>